<template>
  <div class="article-bottom">
      <van-button
        class="comment-btn"
        type="default"
        round
        size="small"
        @click="popupShow"
      >写评论</van-button>
      <van-icon
        name="comment-o"
        :info="total"
        color="#777"
      />
      <van-icon
        :color="isCollected ? 'orange' : '#000'"
        :name="isCollected ? 'star' : 'star-o'"
        @click="delOrAddCollect"
      />
      <van-icon
        color="#777"
        name="good-job-o"
      />
      <van-icon name="share" color="#777777"></van-icon>
      <div class="popupContainer">
        <van-popup v-model="show" position="bottom">
          <van-field
                class="post-field"
                v-model.trim="commentInputVal"
                rows="2"
                autosize
                type="textarea"
                maxlength="50"
                placeholder="请输入留言"
                show-word-limit
              />
              <van-button
                class="post-btn"
                :disabled="!commentInputVal"
                @click="sendCommend"
              >发布</van-button>
        </van-popup>
      </div>
  <!-- 评论封装 -->
  <!-- 回复评论弹层 -->
    <van-popup v-model="isReply" position="bottom" :style="{ height: '70%' }">
      <comment-reply v-if="isReply" @close-popup="isReply = false" :comment="comment" />
    </van-popup>
    </div>
</template>

<script>
import { delOrAddCollect } from '@/api/articleList.js'
import { sendComments } from '@/api/comment.js'
import commentReply from '@/views/Article/commentReply.vue'
import { eventBus } from '@/api/eventBus.js'
export default {
  data () {
    return {
      show: false,
      commentInputVal: '',
      isReply: false,
      comment: {},
      flag: true // 文章评论防抖
    }
  },
  created () {
  },
  components: {
    commentReply
  },
  model: {
    prop: 'isCollected',
    event: 'upCollected'
  },
  props: {
    isCollected: {
      type: Boolean,
      requried: true
    },
    articleId: {
      type: [Number, String, Object],
      requried: true
    },
    total: {
      type: [Number, String]
    }
  },
  provide () {
    return {
      articleId: this.articleId
    }
  },
  mounted () {
    eventBus.$on('reply', comment => {
      this.isReply = true
      this.comment = comment
      console.log(comment)
    })
  },
  methods: {
    async delOrAddCollect () {
      console.log(this.articleId + '')
      if (this.isCollected) {
        await delOrAddCollect(this.isCollected, this.articleId + '')
        console.log(this.isCollected)
      } else {
        console.log(this.isCollected)
        await delOrAddCollect(this.isCollected, this.articleId + '')
      }
      this.isCollected = !this.isCollected
    },
    popupShow () {
      this.show = true
    },
    async sendCommend () {
      if (this.flag) {
        this.flag = false
        try {
          const { data: res } = await sendComments({
            target: this.articleId,
            content: this.commentInputVal
          })
          console.log(res)
          this.$emit('add-comment-list', res.data.new_obj)
          this.$toast.success('发布成功')
          this.show = false
        } catch (err) {
          this.$toast.fail('网络错误请重试')
        }
        this.flag = true
      }
    }
  }
}
</script>

<style scoped lang="less">
.popupContainer {
  .van-popup {
    display: flex;
    align-items: center;
    .post-btn{
      border: none;
      background-color: #fff;
      border-left: 1px solid #ccc;
    }
  }
}

// /deep/.comment-post {
//   display: flex;
//   align-items: center;
//   padding: 32px 0 32px 32px;
//   .post-field {
//     background-color: #f5f7f9;
//   }

// }
</style>
